import React, { Component } from 'react'
import { connect} from 'react-redux'
import { Table,Button ,Tag} from 'antd';
import axios from 'axios'
import { SearchOutlined } from '@ant-design/icons';

class Roles extends Component {
  state = {
    columns: [
        { title: '角色名称', 
          dataIndex: 'roleName',
          key: 'roleName' },
        {
            title: '操作',
            dataIndex: '',
            key: 'x',
            render: () => <div>
                      <Button type="primary" shape="circle" icon={<SearchOutlined />} disabled={true}/>
            </div>,
        }
    ],
    datalist: []
  }

  // 请求数据,长度为0，调用 setList() 方法
  componentDidMount() {
    if(this.props.datalist.length === 0){
      this.props.setList()
    }
  }
  
  render() {
    return (
      <Table
        columns={this.state.columns}
        // 长度不为0，直接在父元素里调用
        dataSource={this.props.datalist}
        rowKey= {item=>{
            // console.log(item)
            return item.id
        }} //设置key值
        
        //展开
        expandable={{
            expandedRowRender: record => {
                // console.log(record.roleRight)
                return <div style={{ margin: 0 }}>
                {
                    record.roleRight.map(item=>
                        <div key={item.category}>
                            {/* <h3>{item.category}:</h3> */}
                            {
                                item.list.map(data=>
                                <Tag color={"green"} key={data}>{data}</Tag>
                                )
                            }
                        </div> 
                    )
                }
            </div>
            }, // rowExpandable: record => true,
        }}
      />
    )
  }
}


const mapStateToProps = (state) =>{
  return {
   datalist:state.roleList
  }
}
const mapDispatchToProps = {
  setList: () =>{
    return axios.get("http://localhost:8000/roles").then(res =>{
      return {
        type:"SetRoleList",
        payload: res.data
      }
    })
  }
}
export default connect(mapStateToProps,mapDispatchToProps)(Roles)
